<!-- 更新 -->

<template>
  <el-container class="home" >
    <!-- 头部 -->
    <el-header>
      <img src="../../assets/logo.png" alt="">
      <div class="ele">电商后台管理系统</div>

      <div class="ultra">
        <!-- <div class="innerbox">欢迎&emsp;<span ref="userName"></span>&emsp;登录</div> -->
        <router-link to="/login">
          <el-button @click="jump" size="small">退出登录</el-button>
        </router-link>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏组件 -->
      <aaside></aaside>
      <el-main>
      <router-view></router-view>

      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import aaside from '../../components/aside/asideArea.vue'
export default {
  components: { aaside },
  mounted () {
    // 在 mounted 钩子中设置 sessionStorage 中的用户名到组件实例的 userName 属性中
    // this.$refs.userName.innerText = sessionStorage.getItem('username')
  },
  methods: {
    jump () {
      this.$router.push('/login')
    }
  },
  computed: {
    powerList: v => v.$store.state.menu.menuList
  }
}
</script>

<style scoped>
.home {
  height: 100%;
}

.el-header {
  background-color: #354457;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.el-main {
  background-color: #e9eef3;
}

.sbButton {
  position: absolute;
  top: 14px;
  left: 200px;
}
.ele {
  font-size: 25px;
  font-weight: normal;
  color: white;
  position: absolute;
  left: 80px;;
}

.el-input {
  float: right;
  width: 200px;
}

.el-icon-search {
  float: none;
}

.el-card .el-button:nth-of-type(2) {
  float: right;
  height: 40px;
  width: 40px;
}

.ultra {
  width: 330px;
}
.innerbox {
  font-size: 20px;
  color: white;
  float: left;
}
.el-header .innerbox span {
  font-size: 20px;
  font-weight: normal;
  line-height: 31px;
}

.el-header .el-button:nth-of-type(1) {
  margin-left: 30px;
}
.el-menu {
  border: none;
}
img{
  width: 40px;
  height: 40px;;;
  float: left;
}
.el-container{
  min-width: 1009px;
}

</style>
